<template>
  <div
    class="register"
    :style="{
      '--current-color': theme,
    }"
  >
    <div class="register-container">
      <div class="register-logo">
        <div class="register-logo__img"></div>
        <div class="register-logo__title">{{ title }}</div>
      </div>
      <div class="register-lt">
        <div class="register-lt__title">{{ title }}</div>
        <div class="register-lt__subtit">2.0全新上线，仅需29元即可拥有!</div>
        <div class="register-lt__des">项目 、队长、管理层均可使用</div>
        <a class="register-lt__link">查看<i class="el-icon-arrow-right"></i></a>
      </div>
      <div class="register-rt">
        <div class="register-header">
          <div class="register-title">注册账号</div>
          <div class="register-login">
            已有账号？<el-button type="text" @click="handleToPath('/login')"
              >登录</el-button
            >
          </div>
          <div class="register-back" @click="handleToPath('/login')">返回</div>
        </div>

        <el-form
          ref="registerForm"
          :model="registerForm"
          :rules="registerRules"
          class="register-form"
          @keyup.enter.native="handleRegister"
        >
          <el-form-item class="register-mobile" prop="mobile">
            <el-input
              v-model="registerForm.mobile"
              class="register-mobile-input"
              type="text"
              auto-complete="off"
              placeholder="请输入您的手机号"
            >
            </el-input>
            <el-select
              class="register-mobile-select"
              v-model="mobileCode"
              placeholder="请选择"
            >
              <el-option label="+86" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="registerForm.password"
              type="password"
              auto-complete="off"
              placeholder="请输入登录密码"
            >
            </el-input>
          </el-form-item>
          <!-- <el-form-item prop="confirmPassword">
            <el-input
              v-model="registerForm.confirmPassword"
              type="password"
              auto-complete="off"
              placeholder="确认密码"
              @keyup.enter.native="handleRegister"
            >
              <svg-icon
                slot="prefix"
                icon-class="password"
                class="el-input__icon input-icon"
              />
            </el-input>
          </el-form-item> -->
          <el-form-item class="register-smscode" prop="smscode">
            <el-input
              v-model="registerForm.smscode"
              class="register-smscode-input"
              auto-complete="off"
              placeholder="请输入验证码"
              maxlength="6"
            >
            </el-input>
            <el-button
              class="register-smscode-text"
              type="text"
              :loading="codeLoading"
              :disabled="codeDisable"
              @click="handleGetCode"
            >
              {{ codeText }}
            </el-button>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
              :loading="loading"
              class="register-btn"
              size="medium"
              type="primary"
              style="width: 100%"
              @click.native.prevent="handleRegister"
            >
              <span v-if="!loading">注 册</span>
              <span v-else>注 册 中...</span>
            </el-button>
            <!-- <div style="float: right">
              <router-link class="link-type" :to="'/register'"
                >使用已有账户登录</router-link
              >
            </div> -->
          </el-form-item>
        </el-form>
        <div class="register-type">
          <el-divider>其他登录方式</el-divider>
          <div class="register-type__btn">
            <svg-icon
              class="register-type__icon register-type__wechat"
              icon-class="icon-wechat"
              @click="handleToPath('/login?isWeChat=1')"
            />
            <svg-icon
              class="register-type__icon register-type__iphone"
              icon-class="icon-iphone"
              @click="handleToPath('/login')"
            />
          </div>
        </div>
      </div>
    </div>
    <!--  底部  -->
    <div class="register-footer">
      <span
        >Copyright © 2020-2022 上海哈勒布科技有限公司
        ICP备案号：沪ICP备2023001994号-1</span
      >
    </div>
  </div>
</template>

<script>
import { getSmsCode, register } from "@/api/login"
import { mapState } from 'vuex'
import { validateMobile, validateCreatePassword } from '@/utils/validate'
import { title } from '@/settings.js'

export default {
  name: "Register",
  data() {
    const phoneValidator = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号码'))
      } else if (!validateMobile(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    const passwordValidator = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'))
      } else if (!validateCreatePassword(value)) {
        callback(new Error('请输入6-20位的数字和字母组合的密码'))
      } else {
        callback()
      }
    }
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      title,
      registerForm: {
        mobile: "",
        password: "",
        confirmPassword: "",
        smscode: "",
      },
      registerRules: {
        mobile: [{ validator: phoneValidator, required: true, trigger: 'blur' }],
        password: [
          { validator: passwordValidator, trigger: "blur", message: "请输入您的密码" }
        ],
        smscode: [{ required: true, trigger: "change", message: "请输入验证码" }],
        confirmPassword: [
          { required: true, trigger: "blur", message: "请再次输入您的密码" },
          { required: true, validator: equalToPassword, trigger: "blur" }
        ]
      },
      loading: false,
      mobileCode: '1',
      // 是否已经获取验证码
      hasGetCode: false,
      codeText: '获取验证码',
      codeLoading: false,
      interval: null,
      // 是否正在倒计时
      timing: false
    };
  },
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
    }),
    codeDisable() {
      return !validateMobile(this.registerForm.mobile) || this.timing
    },
  },
  created() {
  },
  methods: {
    async handleGetCode() {
      if (this.codeLoading) {
        return
      }
      let valid = true
      this.$refs.form.validateField(['mobile'], (errorMessage) => {
        if (errorMessage) {
          valid = false
        }
      })
      if (!valid) {
        return
      }
      this.codeLoading = true
      const params = {
        mobile: this.form.mobile
      }
      getSmsCode(params)
        .then((res) => {
          this.$message.success(res.message)
          this.hasGetCode = true
          this.form.sign = res.data.sign
          this.form.expiredTime = res.data.expiredTime
          this.countDown()
        })
        .finally(() => {
          this.codeLoading = false
        })
    },
    // 倒计时
    countDown() {
      let text = 60
      this.timing = true
      this.codeText = `${text}s`
      this.interval = setInterval(() => {
        text--
        if (text > 0) {
          this.codeText = `${text}s`
        } else {
          this.timing = false
          this.codeText = '获取验证码'
          clearInterval(this.interval)
        }
      }, 1000)
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          register(this.registerForm).then(res => {
            const username = this.registerForm.username;
            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }).then(() => {
              this.$router.push("/login");
            }).catch(() => {});
          }).catch(() => {
            this.loading = false;
          })
        }
      })
    },
    handleToPath(path) {
      this.$router.push(path)
    },
  }
};
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  height: 100%;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 31.25%;
    height: 100%;
    background: var(--current-color);
  }
}
.register-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 1158px;
  margin: 0 auto;
  position: relative;
  .register-logo {
    position: absolute;
    top: 20px;
    left: 0;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    color: var(--current-color);
    font-size: 20px;
    font-weight: 300;
    .register-logo__img {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: #eee;
      margin-right: 12px;
    }
  }
}
.register-lt {
  line-height: 1;
  color: #777;
  font-size: 15px;
  &__title {
    color: #000;

    font-size: 32px;
    font-weight: 700;
  }
  &__subtit {
    margin: 36px 0 29px;
    font-size: 20px;
  }
  &__des {
    margin-bottom: 23px;
  }
  &__link {
    color: var(--current-color);
  }
}
.register-rt {
  width: 436px;
  height: 604px;
  padding: 0px 36px;
  position: relative;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  .register-header {
    position: relative;
    .register-back {
      height: 36px;
      line-height: 36px;
      padding: 0 20px;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .register-title {
    margin-top: 40px;
    color: var(--current-color);
    font-weight: normal;
    line-height: 30px;
    font-size: 20px;
  }
  .register-login {
    color: #77849d;
    margin-top: 12px;
    font-size: 12px;
    line-height: 1;
    .el-button {
      padding: 0;
      text-decoration: underline;
      font-size: 12px;
    }
  }
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  // width: 400px;
  padding: 50px 0 8px 0;
  .el-form-item {
    margin-bottom: 24px;
  }
  .el-input,
  .el-select {
    height: 48px;
  }
  ::v-deep input {
    height: 48px;
    border-radius: 8px;
    background: #fafafa;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1) inset;
  }
  .register-btn {
    padding: 17px 20px;
    box-shadow: 0px 4px 6px 0px rgba(54, 109, 250, 0.3);
    border-radius: 25px;
  }
  // .input-icon {
  //   height: 49px;
  //   width: 14px;
  //   margin-left: 2px;
  // }
}
.register-form {
  border-radius: 6px;
  background: #ffffff;
  // width: 400px;
  padding: 50px 0 8px 0;
  .el-form-item {
    margin-bottom: 24px;
  }
  .el-input,
  .el-select {
    height: 48px;
  }
  ::v-deep input {
    height: 48px;
    border-radius: 8px;
    background: #fafafa;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1) inset;
  }
  .register-btn {
    padding: 17px 20px;
    box-shadow: 0px 4px 6px 0px rgba(54, 109, 250, 0.3);
    border-radius: 25px;
  }
  // .input-icon {
  //   height: 49px;
  //   width: 14px;
  //   margin-left: 2px;
  // }
}
.register-mobile {
  position: relative;
  .register-mobile-input ::v-deep input {
    padding: 0 15px 0 60px;
  }
  .register-mobile-select {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    ::v-deep input {
      padding: 0 20px 0 12px;
      border: 0;
      box-shadow: none;
      background: transparent;
    }
    ::v-deep .el-input__suffix {
      right: 0;
    }
    ::v-deep .el-input__icon {
      width: 20px;
    }
  }
}
.register-smscode {
  position: relative;
  .register-smscode-input ::v-deep input {
    padding: 0 90px 0 15px;
  }

  .register-smscode-text {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.register-type {
  ::v-deep .el-divider__text {
    color: #959595;
    font-size: 10px;
  }
  .register-type__btn {
    margin-top: 32px;
    text-align: center;
    .register-type__icon {
      font-size: 38px;
      color: var(--current-color);
      cursor: pointer;
      margin-right: 16px;
      &:last-child {
        margin-right: 0;
      }
    }
    .register-type__wechat {
      padding: 7px;
      font-size: 38px;
      background-color: #04ae0f;
      border-radius: 50%;
    }
  }
}

.register-back {
  display: inline-block;
  height: 48px;
  line-height: 48px;
  padding: 0 40px;
  color: #000;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 32px;
  background: #fafafa;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1) inset;
}
.register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #b4b4b4;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
</style>
